Sometimes, during regular SharePoint Framework development, you add new React components into your codebase. Sometimes VScode behaves very strangely and doesn't provide you with needed error highlights and import suggestions. For example, having below code: Which problems do we have here? 1. unknown import "newGuid" 2. since we return jsx, we need React...
A few months ago I created a tool, which speeds up a regular "gulp serve" process. In a nutshell, it uses a separate webpack based build. Please read this post to learn more. Since the initial release, I've fixed a few good things and added new features. The most awaited is library components support. Read further to find out how to use spfx-fast-serve with....
In August 2019 SharePoint Framework 1.9.x was released. Among different changes also support for Webpack 4 was introduced. What does it mean for us? It means slightly improved build speed, support for a wide range of plugins and better tree-shaking. What is webpack tree-shaking exactly? In simple words, webpack is smart enough to automatically remove "dead.....
- Intro - CSS in JS - CSS in JS with SharePoint Framework - Install the library - Write your styles in TypeScript - Apply class names to React component - What about theming? - Conclusion A very common way of styling your SharePoint Framework React components is through the css (to be precise sass, which eventually compiles to css). Actually, SharePoint...
SharePoint Framework 1.9 introduced support for React 16.8+. While only a minor part of the version was changed (16.7 -> 16.8), it means a lot. It means that you can use the full power of React hooks. But should you? Obviously, the answer is yes, because React hooks introduce a lot of useful features, including: - reuse stateful logic across your many React....
Sometimes when working on SharePoint Framework projects you have a need to use third-party libraries with their own css styles. You can include css styles using different technics - via import statement right in your code or using dynamic loading with SPComponentLoader. However, some css libraries have very common selectors, which affects Html in the...
You have a custom SharePoint Site Design, which executes (through MS Flow or Azure Logic App) PnP Provisioning process. You want to notify users that the site is not fully ready yet and it's still being updated (by background provisioning, which might take a long time). One option is to use two-way interactive communication between the SharePoint web site...
Please also check out this post - SPFx overclockers or how to significantly speed up the "gulp serve" command which uses different approach in performance tweaking and gives you extremely fast "serve" speed Today's post will be about SharePoint Framework build performance. Especially about "serve" command, because it's the most frequently used command among....
Any version? \-Yes, any. Including the latest versions of React, TypeScript, etc. ? \-Yes. - The problem - A way to solve the issue of the outdated packages - A bit of theory - Implementation - Scaffold SPFx project for SharePoint 2019 - Create externals library to host your web part code - Add webpack build into the external lib - Fix localized resources -....
Hydra is attacking porcupine? Well, actually not. Because Hydra is Lerna.js and porcupine is a SharePoint Framework solution with library components. Most likely you've heard about SharePoint Framework and library component, but not about Lerna. Lerna is A tool for managing JavaScript projects with multiple packages. Sounds simple, but probably still not...